{% extends "base.html" %}
{% block head %}
<style>
.useradd {
    margin: 30px 30px;
}

</style>
{% endblock %}

{% block javascript %}
    <script>
        $('input[name="g-select-all"]').click(function(){
            //alert(this.checked);
            if($(this).is(':checked')){
                $('input[name="id"]').each(function(){
                    //此处如果用attr，会出现第三次失效的情况
                    $(this).prop("checked",true);
                });
            }else{
                $('input[name="id"]').each(function(){
                        $(this).removeAttr("checked",false);
                    });
            }

        });

    </script>

{% endblock %}

{% block nav_page %}
                <li><a href="#">用户管理</a></li>
                <li class="active">用户列表</li>
{% endblock %}

{% block content %}
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-8 m-b-xs">
                                <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target=".useradd"><i class="fa fa-user-plus icon"></i>用户添加</button>

                            </div>
                            <div class="col-sm-4">
                                <form method="post">
                                    <div class="input-group">
                                        <input name="key" type="text" placeholder="请输入关键词" class="input-sm form-control" value="{{ key }}" required> <span class="input-group-btn">
                                        <input type="submit" class="btn btn-sm btn-primary" value="搜索"> </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>

                                        <th><input type="checkbox" name="g-select-all"/></th>
                                        <th>用户名</th>
                                        <th>token</th>
                                        <th>微信</th>
                                        <th>邮箱</th>
                                        <th>激活</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {% for user in users %}
                                        <tr>
                                            <td>
                                                <input name="id" type="checkbox" class="i-checks" value="{{ user.id }}" >
                                            </td>
                                            <td><i class="fa fa-user text-navy icron"></i>
                                                <strong>{{ user.username }}</strong></td>
                                            <td><code>{{ user.token }}</code></td>
                                            <td>
                                                {% if user.wechat %}
                                                    <i class="fa fa-wechat text-navy icon"></i>{{ user.wechat }}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if  user.email %}
                                                    <i class="fa fa-envelope icon"></i>{{ user.email }}
                                                {% endif %}

                                            </td>
                                            <td>
                                                {% if user.status %}
                                                    <i class="fa fa-check text-navy icon"></i>
                                                {% else %}
                                                    <i class="fa fa-close text-red icon"></i>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <form method="post">
                                                    <input hidden="hidden" name="id" value="{{ user.id }}">
                                                    <input hidden="hidden" name="userdel" value="userdel">
                                                    <input class="btn btn-danger btn-xs" type="submit" value="删除">
                                                </form>
                                            </td>
                                        </tr>
                                    {% endfor %}

                                </tbody>
                            </table>

                            <!-- 弹出框 -->
                            <div class="modal fade useradd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                <form method="post">

                                  <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">用户添加</h4>
                                      </div>
                                      <div class="modal-body">
                                        <div class="row">
                                            <input hidden="hidden" name="useradd" value="useradd">
                                            <div class="form-group">
                                                <input type="text" class="form-control" name="username" placeholder="请输入用户名" required="">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" class="form-control" name="password" placeholder="请输入密码" required="">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" class="form-control" name="password2" placeholder="请再次输入密码" required="">
                                            </div>

                                        </div>
                                      </div>
                                      <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <input type="submit"  class="btn btn-primary" value="注册">
                                      </div>
                                    </div><!-- /.modal-content -->
                                  </div><!-- /.modal-dialog -->
                                </form>
                            </div><!-- /.modal -->
                        </div>

                    </div>
                </div>
{% endblock %}